<script lang="ts">
    import { useClassList } from "../../utils/useClassList";
    import { useStyle } from "../../utils/useStyle";
    import type { IconProps } from "./Icon";
    import * as icons from "./icons";

    const props: IconProps = $props();
    const { spin, rotate, size, style, color, icon, ...rest } = props;
    const classList = $derived(
        useClassList(props, "cui-icon", {
            "cui-icon-spinning": props.spin,
        })
    );
    const newStyle = $derived(
        useStyle(props, {
            transform: props.rotate ? `rotate(${props.rotate}deg)` : "",
            "font-size": props.size !== undefined ? `${props.size}px` : "",
            color: props.color ? props.color : "",
        })
    );

    const Comp: any = props.icon ? (icons[props.icon as keyof typeof icons] ?? null) : null;
</script>

<span {...rest} class={classList} style={newStyle}>
    {#if Comp}
        <Comp></Comp>
    {/if}
</span>
